<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document Selection Example</title>
		<style>
			#text {
				width: 80%;
				height: 100px;
				border: 1px solid #ccc;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div contenteditable="true" id="text">
			This is a simple text editor. Try selecting some text or click to set selection range.
		</div>

		<script>
			// 获取内容区的元素
			const textArea = document.getElementById('text')

			// 创建一个范围对象
			const range = document.createRange()

			// 监听点击事件，设置选区
			textArea.addEventListener('click', function (event) {
				// 获取当前的文本选择对象
				const selection = document.getSelection()

				// 清除之前的选区
				selection.removeAllRanges()

				// 设置起始位置为文本的第 5 个字符（索引从 0 开始）
				range.setStart(textArea.firstChild, 5) // 第一个文本节点，位置 5
				range.setEnd(textArea.firstChild, 15) // 第一个文本节点，位置 15

				// 将新的选区应用到页面
				selection.addRange(range)
			})

			// 另一个设置选区的示例：使用 setBaseAndExtent
			textArea.addEventListener('dblclick', function () {
				const selection = document.getSelection()

				// 使用 setBaseAndExtent 设置选区（从字符 8 到字符 18）
				selection.setBaseAndExtent(textArea.firstChild, 8, textArea.firstChild, 18)
			})
		</script>
	</body>
</html>
